<template>
  <!-- 基本数据 赛项 -->
  <div class="pageWrap">
    <el-tabs v-model="activeGroupIndex" type="card" @tab-click="groupChange">
      <!--  editable @tab-remove="removeGroup" -->
      <el-tab-pane
        :key="v.name"
        v-for="(v, i) in groupArr"
        :label="v.name"
        :name="'g' + i"
      >
        <!-- <span slot="label"><i class="el-icon-date"></i>{{v.name}}</span> -->
      </el-tab-pane>
    </el-tabs>
    <el-form :model="groupFrom" class="fromBox" label-width="100px">
      <el-form-item :label="mold == 'S' ? '赛事名称' : '活动名称'" prop="name">
        <el-input v-model="groupFrom.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-col :md="12" :sm="24">
        <el-form-item label="开始时间" required>
          <!-- <el-input v-model="groupFrom.startDate" placeholder="请选择开始时间"></el-input> -->
          <el-date-picker
            v-model="groupFrom.startDate"
            type="datetime"
            placeholder="请选择开始时间"
            style="width: 95%"
            value-format="yyyy/MM/dd HH:mm:ss"
            format="yyyy/MM/dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="结束时间" required>
          <el-date-picker
            v-model="groupFrom.endDate"
            type="datetime"
            placeholder="请选择开始时间"
            style="width: 95%"
            value-format="yyyy/MM/dd HH:mm:ss"
            format="yyyy/MM/dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <!-- v-if="mold=='S'" -->
      <el-col :md="12" :sm="24">
        <el-form-item label="总距离" required>
          <el-input v-model="groupFrom.wholeCourse" placeholder="请输入总距离">
            <template slot="append">KM</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="爬升">
          <el-input v-model="groupFrom.rise" placeholder="请输入爬升">
            <template slot="append">M</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="下降">
          <el-input v-model="groupFrom.decline" placeholder="请输入下降">
            <template slot="append">M</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="平均海拔">
          <el-input
            v-model="groupFrom.meanAltitude"
            placeholder="请输入平均海拔"
          >
            <template slot="append">M</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24" v-if="$orgId == 1">
        <el-form-item label="技术路线">
          <el-input
            v-model="groupFrom.technical"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="组别简介">
          <el-input
            v-model="groupFrom.introduce"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item>
          <div slot="label">成员类型</div>
          <el-button size="small" @click="groupFrom.matchGroups.push({name:''})">添加</el-button>
          <div class="perTypeBox" v-for="(v,i) in groupFrom.matchGroups" :key="i">
            <el-input type="text" v-model="v.name" class="perTypeIpt"></el-input>
            <el-button type="danger" icon="el-icon-delete" circle @click="groupFrom.matchGroups.splice(i,1)"></el-button>
          </div>
        </el-form-item>
      </el-col>

      <el-col>
        <el-form-item label="官方路线图/海拔图/站点图" label-width="180">
          <div class="imgsBox" v-for="(v, i) in groupFrom.imgArr" :key="i">
            <img :src="v" alt />
            <div class="delImg">
              <i
                class="el-icon-delete"
                @click="groupFrom.imgArr.splice(i, 1)"
              ></i>
            </div>
          </div>
          <el-upload
            class="upImgBox"
            :action="upLoadUrl"
            :show-file-list="false"
            :on-success="(value) => picSuccess(value)"
            :before-upload="(file) => beforeUpload(file)"
            name="img"
          >
            <i class="el-icon-plus upImgIcon"></i>
          </el-upload>
          <span class="tips">注：请上传jpg格式，大小不得超过1M</span>
        </el-form-item>
      </el-col>
      <el-form-item label="计时点集合" class="left">
        <el-button type="info" @click="addGroupCard">添加</el-button>
      </el-form-item>
      <el-table :data="groupFrom.info" class="left">
        <el-table-column label="站点" width="180">
          <template slot-scope="{ row }">
            <el-select
              v-model="row.cpId"
              placeholder="请选择"
              filterable
              @change="cpChange(row)"
            >
              <el-option
                v-for="item in matchCpInfos"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="cpName"
          label="名称"
          width="180"
        ></el-table-column>
        <el-table-column prop="address" label="距起点(KM)">
          <template slot-scope="{ row }">
            <el-input
              clearable
              v-model="row.distance"
              placeholder="请输入距离"
              @input="$forceUpdate()"
            >
              <template slot="append">KM</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="endDate" label="关门时间">
          <template slot-scope="{ row }">
            <el-input
              clearable
              v-model="row.endDate"
              placeholder="请输入距起点打卡时间"
              @input="$forceUpdate()"
              v-if="anytimeClockin==1"
            >
              <template slot="append">分钟</template>
            </el-input>
            <el-date-picker
            v-else
            v-model="row.endDate"
            type="datetime"
            placeholder="请选择时间"
            value-format="yyyy/MM/dd HH:mm"
            format="yyyy/MM/dd HH:mm"
          ></el-date-picker>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="爬升">
          <template slot-scope="{row}">
            <el-input clearable v-model="row.rise" placeholder="请输入爬升" @input="$forceUpdate()"></el-input>
          </template>
        </el-table-column>-->
        <!-- <el-table-column prop="address" label="打卡点图片" v-if="mold=='H'">
          <template slot-scope="{row}">
            <el-input clearable v-model="row.name" placeholder="请输入站点" @input="$forceUpdate()"></el-input>
          </template>
        </el-table-column>-->
        <el-table-column label="操作" width="80">
          <template slot-scope="{ row, $index }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delcp(row.id, $index)"
              v-if="$index != 0"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="primary" @click="putGroup()">保存</el-button>
  </div>
</template>

<script>
var match_start_date = "";
var match_end_date = "";
var cpInfo = {
  cpId: "", // 站点id
  cpImg: "", // 打卡点图片
  cpInfo: "", // 打卡点信息
  cpName: "", //站点名称
  descend: null, // 下降
  distance: "", //距起点 距离
  endDate: "", //关门时间
  lat: "", // 纬度
  lng: "", // 经度
  matchInfoId: "", // 赛项id
  name: "", //站点
  rise: null, // 上升
};
export default {
  data() {
    return {
      matchCpInfos: [], // 赛事站点集合
      activeGroupIndex: "g0",
      groupArr: [],
      upLoadUrl: this.$url + "/sbr/match/uploadImg",
      groupFrom: {
        id: "",
        name: "",
        startDate: "",
        endDate: "",
        wholeCourse: "",
        rise: "",
        decline: "",
        technical: "",
        meanAltitude: "",
        info: [],
        imgUrl: "",
        imgArr: [],
        introduce: "",
        matchGroups:[]
      },
      mold: "S",
      anytimeClockin:0
    };
  },
  methods: {
    // 切换赛项
    groupChange() {
      let i = this.activeGroupIndex.replace(/g/g, "");
      this.groupFrom = this.groupArr[i];
    },
    // 删除赛项
    removeGroup(name) {
      let i = name.replace(/g/g, "");
      this.$confirm("此操作将删除该赛项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取赛项
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          match_start_date = rr.matchDate;
          match_end_date = rr.matchEndDate;
          rr.matchInfoLists.forEach((v) => {
            v.imgArr = [];
            if (v.imgUrl) v.imgArr = v.imgUrl.split(";");
            if (v.info.length == 0) {
              v.info = [JSON.parse(JSON.stringify(cpInfo))];
            }
          });
          this.anytimeClockin=rr.anytimeClockin
          this.groupArr = rr.matchInfoLists;
          this.groupChange();
        });
    },
    // 添加赛项打卡点
    addGroupCard() {
      this.groupFrom.info.push(JSON.parse(JSON.stringify(cpInfo)));
    },
    // 切换站点
    cpChange(row) {
      let it = this.matchCpInfos.find((v) => {
        return v.id == row.cpId;
      });
      row.name = it.name;
      row.cpName = it.cpName;
      row.lat = it.lat;
      row.lng = it.lng;
      this.$forceUpdate();
    },
    // 提交
    putGroup() {
      if (!this.groupFrom.startDate) {
        this.$message.error("请选择开始时间");
        return false;
      }
      if (!this.groupFrom.endDate) {
        this.$message.error("请选择结束时间");
        return false;
      }
      // let empty = this.groupFrom.info.find((v) => {
      //   return v.cpId == "";
      // });
      // if (empty) {
      //   this.$message.error("请选择站点");
      //   return false;
      // }
      this.groupFrom.info = this.groupFrom.info.filter((v) => {
        return v.cpId != "";
      });
      this.groupFrom.imgUrl = this.groupFrom.imgArr.join(";");
      this.groupFrom.info.forEach((v) => {
        v.matchInfoId = this.groupFrom.id;
      });
      // console.log(this.groupFrom);
      this.$axios
        .post("/sbr/match/putMatchInfo", this.groupFrom)
        .then((res) => {
          let rr = res.data.data;
          this.getGroupArr();
          this.$message.success("保存成功");
        });
    },
    // 删除赛项打卡点
    delcp(row, i) {
      this.groupFrom.info.splice(i, 1);
    },
    // 获取赛事所有打卡点
    getCpInfos() {
      this.$axios
        .get("/sbr/match/getMatchCpList/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          this.matchCpInfos = rr;
          this.getGroupArr();
        });
    },

    picSuccess(v) {
      this.groupFrom.imgArr.push(v.data.filePath);
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
  },
  created() {
    this.mold = this.$Base64.decode(sessionStorage.getItem("mold"));
    this.getCpInfos();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.fromBox {
  overflow: hidden;
}
.left {
  float: left;
  width: 100%;
}
.upImgBox {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  border: 1px dashed #f0f0f0;
  text-align: center;
  line-height: 100px;
  float: left;
  cursor: pointer;
}
.upImgIcon {
  font-size: 30px;
  color: #999;
}
.imgsBox {
  width: 200px;
  overflow: hidden;
  position: relative;
  float: left;
  margin-right: 10px;
}
.imgsBox > img {
  width: 100%;
  float: left;
}
.delImg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}
.imgsBox:hover .delImg {
  /* display: block; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.perTypeBox {
  width: 100%;
  float: left;
  margin-bottom: 5px;
}
.perTypeIpt {
  max-width: 300px;
  float: left;
  margin-right: 8px;
}
</style>